﻿<UserControl x:Class="Berico.SnagL.Infrastructure.Controls.AttributePopup"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"             
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"    
    xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.SL4"
    xmlns:local="clr-namespace:Berico.Common.UI.Templates;assembly=Berico.Common"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400"
    DataContext="{Binding AttributePopupVM, Source={StaticResource Locator}}"
    Height="Auto" Width="Auto">

    <UserControl.Resources>
        <Color x:Key="TextBoxOverFill">#FFB1C7E0</Color>
        <Color x:Key="ScrollBarThumbFill">#FF4A75A9</Color>
        <Color x:Key="ScrollBarTrackBackgroundFill1">#FFF0F0F0</Color>
        <Color x:Key="ScrollBarTrackBackgroundFill2">#FF8C8C8C</Color>
        <Color x:Key="ScrollBarTrackForegroundFill1">#FFB2B2B2</Color>
        <Color x:Key="ScrollBarTrackForegroundFill2">#FFBABABA</Color>
        <Color x:Key="ScrollBarStroke2">#FF787878</Color>
        <Color x:Key="OverStroke">#FF749FD2</Color>

        <SolidColorBrush x:Key="TextBoxSelection" Color="#FF309AFF" />
        <SolidColorBrush x:Key="TextBoxOverStroke" Color="{StaticResource OverStroke}" />
        <SolidColorBrush x:Key="TextBoxFocusStroke" Color="#B24A75A9" />
        <SolidColorBrush x:Key="ScrollBarStroke" Color="{StaticResource ScrollBarStroke2}" />
        <SolidColorBrush x:Key="CheckBoxOverFill" Color="{StaticResource TextBoxOverFill}" />
        <SolidColorBrush x:Key="SliderThumbBackgroundStroke" Color="{StaticResource ScrollBarTrackForegroundFill1}" />
        <SolidColorBrush x:Key="ScrollViewerStroke" Color="{StaticResource ScrollBarTrackForegroundFill2}" />
        <SolidColorBrush x:Key="Symbol" Color="#FF414141" />
        <SolidColorBrush x:Key="SymbolEtch" Color="#FFE6E6E6" />
        <SolidColorBrush x:Key="OutsideFontColor" Color="#FF000000"/>

        <LinearGradientBrush x:Key="VerticalScrollbarThumbBackground" EndPoint="1.0,0.5" StartPoint="0,0.5">
            <GradientStop Color="{StaticResource ScrollBarThumbFill}" Offset="1"/>
            <GradientStop Color="{StaticResource TextBoxOverFill}" Offset="0.15"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="HorizontalScrollbarThumbBackground" EndPoint="0.5,0" StartPoint="0.5,1">
            <GradientStop Color="{StaticResource ScrollBarThumbFill}" Offset="1"/>
            <GradientStop Color="{StaticResource TextBoxOverFill}" Offset="0.15"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="HorizontalScrollbarTrackBackground" EndPoint="0.5,0" StartPoint="0.5,1">
            <GradientStop Color="{StaticResource ScrollBarTrackBackgroundFill1}"/>
            <GradientStop Color="{StaticResource ScrollBarTrackBackgroundFill2}" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="HorizontalScrollbarTrackForeground" EndPoint="0.5,0" StartPoint="0.5,1">
            <GradientStop Color="{StaticResource ScrollBarTrackForegroundFill1}"/>
            <GradientStop Color="{StaticResource ScrollBarTrackForegroundFill2}" Offset="1"/>
            <GradientStop Color="#FFFFFFFF" Offset="0.35"/>
            <GradientStop Color="#FFFFFFFF" Offset="0.65"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="VerticalScrollbarTrackBackground" EndPoint="1.0,0.5" StartPoint="0,0.5">
            <GradientStop Color="{StaticResource ScrollBarTrackBackgroundFill1}"/>
            <GradientStop Color="{StaticResource ScrollBarTrackBackgroundFill2}" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="VerticalScrollbarTrackForeground" EndPoint="0,0.5" StartPoint="1,0.5">
            <GradientStop Color="{StaticResource ScrollBarTrackForegroundFill1}"/>
            <GradientStop Color="{StaticResource ScrollBarTrackForegroundFill2}" Offset="1"/>
            <GradientStop Color="#FFFFFFFF" Offset="0.35"/>
            <GradientStop Color="#FFFFFFFF" Offset="0.65"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="TextBoxScore" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFDBDBDB" Offset="1"/>
            <GradientStop Color="{StaticResource ScrollBarStroke2}" Offset="0"/>
            <GradientStop Color="{StaticResource ScrollBarTrackForegroundFill1}" Offset="0.1"/>
            <GradientStop Color="{StaticResource ScrollBarTrackForegroundFill2}" Offset="0.906"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="CheckBoxTransparentLayer" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FCFFFFFF"/>
            <GradientStop Color="#4CFFFFFF" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="HorizontalSliderFiller" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFC8E1FF" Offset="0"/>
            <GradientStop Color="{StaticResource ScrollBarThumbFill}" Offset="1"/>
            <GradientStop Color="{StaticResource OverStroke}" Offset="0.49"/>
            <GradientStop Color="{StaticResource ScrollBarThumbFill}" Offset="0.50"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="VerticalSliderFiller" EndPoint="1,0.5" StartPoint="0,0.5">
            <GradientStop Color="#FFC8E1FF" Offset="0"/>
            <GradientStop Color="{StaticResource ScrollBarThumbFill}" Offset="1"/>
            <GradientStop Color="{StaticResource OverStroke}" Offset="0.49"/>
            <GradientStop Color="{StaticResource ScrollBarThumbFill}" Offset="0.50"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="HorizontalSliderTrack" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF717171"/>
            <GradientStop Color="{StaticResource ScrollBarStroke2}" Offset="1"/>
            <GradientStop Color="{StaticResource ScrollBarTrackBackgroundFill2}" Offset="0.5"/>
            <GradientStop Color="{StaticResource ScrollBarTrackBackgroundFill2}" Offset="0.5"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="VerticalSliderTrack" EndPoint="1,0.5" StartPoint="0,0.5">
            <GradientStop Color="#FF717171"/>
            <GradientStop Color="{StaticResource ScrollBarStroke2}" Offset="1"/>
            <GradientStop Color="{StaticResource ScrollBarTrackBackgroundFill2}" Offset="0.5"/>
            <GradientStop Color="{StaticResource ScrollBarTrackBackgroundFill2}" Offset="0.5"/>
        </LinearGradientBrush>

        <Style TargetType="ScrollBar">
            <Setter Property="MinWidth" Value="17"/>
            <Setter Property="MinHeight" Value="17"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ScrollBar">
                        <Grid x:Name="Root" Visibility="Visible">
                            <Grid.Resources>

                                <!-- RepeatButton Templates -->
                                <ControlTemplate x:Key="RepeatButtonTemplate" TargetType="RepeatButton">
                                    <Grid x:Name="Root" Background="Transparent">
                                        <vsm:VisualStateManager.VisualStateGroups>
                                            <vsm:VisualStateGroup x:Name="CommonStates">
                                                <vsm:VisualState x:Name="Normal" />
                                            </vsm:VisualStateGroup>
                                        </vsm:VisualStateManager.VisualStateGroups>
                                    </Grid>
                                </ControlTemplate>

                                <!-- Horizontal Inc/Dec Templates -->
                                <ControlTemplate x:Key="HorizontalIncrementTemplate" TargetType="RepeatButton">
                                    <Grid x:Name="Root">
                                        <vsm:VisualStateManager.VisualStateGroups>
                                            <vsm:VisualStateGroup x:Name="CommonStates">
                                                <vsm:VisualStateGroup.Transitions>
                                                    <vsm:VisualTransition To="MouseOver" GeneratedDuration="0:0:0.1" />
                                                    <vsm:VisualTransition To="Pressed" GeneratedDuration="0:0:0.1" />
                                                </vsm:VisualStateGroup.Transitions>
                                                <vsm:VisualState x:Name="Normal" />
                                                <vsm:VisualState x:Name="MouseOver">
                                                    <Storyboard>
                                                        <!--<DoubleAnimation Duration="0" Storyboard.TargetName="Over" Storyboard.TargetProperty="Opacity" To="1"/>-->
                                                    </Storyboard>
                                                </vsm:VisualState>
                                                <vsm:VisualState x:Name="Pressed">
                                                    <Storyboard>
                                                        <!--<DoubleAnimation Duration="0" Storyboard.TargetName="Press" Storyboard.TargetProperty="Opacity" To="1"/>-->
                                                    </Storyboard>
                                                </vsm:VisualState>
                                                <vsm:VisualState x:Name="Disabled">
                                                    <Storyboard>
                                                        <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledElement" Storyboard.TargetProperty="Opacity" To=".7" />
                                                    </Storyboard>
                                                </vsm:VisualState>
                                            </vsm:VisualStateGroup>
                                        </vsm:VisualStateManager.VisualStateGroups>
                                        <Rectangle x:Name="DisabledElement" Fill="#FFFFFFFF" Opacity="0"/>
                                    </Grid>
                                </ControlTemplate>
                                <ControlTemplate x:Key="HorizontalDecrementTemplate" TargetType="RepeatButton">
                                    <Grid x:Name="Root">
                                        <vsm:VisualStateManager.VisualStateGroups>
                                            <vsm:VisualStateGroup x:Name="CommonStates">
                                                <vsm:VisualStateGroup.Transitions>
                                                    <vsm:VisualTransition To="MouseOver" GeneratedDuration="0:0:0.1" />
                                                    <vsm:VisualTransition To="Pressed" GeneratedDuration="0:0:0.1" />
                                                </vsm:VisualStateGroup.Transitions>
                                                <vsm:VisualState x:Name="Normal" />
                                                <vsm:VisualState x:Name="MouseOver">
                                                    <Storyboard>
                                                        <!--<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundMouseOver" Storyboard.TargetProperty="Opacity" To="1"/>-->
                                                    </Storyboard>
                                                </vsm:VisualState>
                                                <vsm:VisualState x:Name="Pressed">
                                                    <Storyboard>
                                                        <!--<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundPressed" Storyboard.TargetProperty="Opacity" To="1"/>-->
                                                    </Storyboard>
                                                </vsm:VisualState>
                                                <vsm:VisualState x:Name="Disabled">
                                                    <Storyboard>
                                                        <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledElement" Storyboard.TargetProperty="Opacity" To=".7" />
                                                    </Storyboard>
                                                </vsm:VisualState>
                                            </vsm:VisualStateGroup>
                                        </vsm:VisualStateManager.VisualStateGroups>
                                        <Rectangle x:Name="DisabledElement" Fill="#FFFFFFFF" Opacity="0"/>
                                    </Grid>
                                </ControlTemplate>

                                <!-- Vertical Inc/Dec Templates -->
                                <ControlTemplate x:Key="VerticalIncrementTemplate" TargetType="RepeatButton">
                                    <Grid x:Name="Root">
                                        <vsm:VisualStateManager.VisualStateGroups>
                                            <vsm:VisualStateGroup x:Name="CommonStates">
                                                <vsm:VisualStateGroup.Transitions>
                                                    <vsm:VisualTransition To="MouseOver" GeneratedDuration="0:0:0.1" />
                                                    <vsm:VisualTransition To="Pressed" GeneratedDuration="0:0:0.1" />
                                                </vsm:VisualStateGroup.Transitions>
                                                <vsm:VisualState x:Name="Normal" />
                                                <vsm:VisualState x:Name="MouseOver">
                                                    <Storyboard>
                                                        <!--<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundOver" Storyboard.TargetProperty="Opacity" To="1" />-->
                                                    </Storyboard>
                                                </vsm:VisualState>
                                                <vsm:VisualState x:Name="Pressed">
                                                    <Storyboard>
                                                        <!--<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundPressed" Storyboard.TargetProperty="Opacity" To="1" />-->
                                                    </Storyboard>
                                                </vsm:VisualState>
                                                <vsm:VisualState x:Name="Disabled">
                                                    <Storyboard>
                                                        <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledElement" Storyboard.TargetProperty="Opacity" To=".7" />
                                                    </Storyboard>
                                                </vsm:VisualState>
                                            </vsm:VisualStateGroup>
                                        </vsm:VisualStateManager.VisualStateGroups>
                                        <Rectangle x:Name="DisabledElement" Fill="#FFFFFFFF" Opacity="0"/>
                                    </Grid>
                                </ControlTemplate>
                                <ControlTemplate x:Key="VerticalDecrementTemplate" TargetType="RepeatButton">
                                    <Grid x:Name="Root">
                                        <vsm:VisualStateManager.VisualStateGroups>
                                            <vsm:VisualStateGroup x:Name="CommonStates">
                                                <vsm:VisualStateGroup.Transitions>
                                                    <vsm:VisualTransition To="MouseOver" GeneratedDuration="0:0:0.1" />
                                                    <vsm:VisualTransition To="Pressed" GeneratedDuration="0:0:0.1" />
                                                </vsm:VisualStateGroup.Transitions>
                                                <vsm:VisualState x:Name="Normal" />
                                                <vsm:VisualState x:Name="MouseOver">
                                                    <Storyboard>
                                                        <!--<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundMouseOver" Storyboard.TargetProperty="Opacity" To="1"/>-->
                                                    </Storyboard>
                                                </vsm:VisualState>
                                                <vsm:VisualState x:Name="Pressed">
                                                    <Storyboard>
                                                        <!--<DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundPressed" Storyboard.TargetProperty="Opacity" To="1"/>-->
                                                    </Storyboard>
                                                </vsm:VisualState>
                                                <vsm:VisualState x:Name="Disabled">
                                                    <Storyboard>
                                                        <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledElement" Storyboard.TargetProperty="Opacity" To=".7" />
                                                    </Storyboard>
                                                </vsm:VisualState>
                                            </vsm:VisualStateGroup>
                                        </vsm:VisualStateManager.VisualStateGroups>
                                        <Rectangle x:Name="DisabledElement" Fill="#FFFFFFFF" Opacity="0"/>
                                    </Grid>
                                </ControlTemplate>

                                <!-- Thumb Templates -->
                                <ControlTemplate x:Key="VerticalThumbTemplate" TargetType="Thumb">
                                    <Grid>
                                        <vsm:VisualStateManager.VisualStateGroups>
                                            <vsm:VisualStateGroup x:Name="CommonStates">
                                                <vsm:VisualStateGroup.Transitions>
                                                    <vsm:VisualTransition To="MouseOver" GeneratedDuration="0:0:0.1" />
                                                    <vsm:VisualTransition To="Pressed" GeneratedDuration="0:0:0.1" />
                                                </vsm:VisualStateGroup.Transitions>
                                                <vsm:VisualState x:Name="Normal" />
                                                <vsm:VisualState x:Name="MouseOver">
                                                    <Storyboard>
                                                        <DoubleAnimation Duration="0" Storyboard.TargetName="Over" Storyboard.TargetProperty="Opacity" To="1"/>
                                                    </Storyboard>
                                                </vsm:VisualState>
                                                <vsm:VisualState x:Name="Pressed">
                                                    <Storyboard>
                                                    </Storyboard>
                                                </vsm:VisualState>
                                                <vsm:VisualState x:Name="Disabled">
                                                    <Storyboard>
                                                        <DoubleAnimation Duration="0" Storyboard.TargetName="ThumbVisual" Storyboard.TargetProperty="Opacity" To="0" />
                                                    </Storyboard>
                                                </vsm:VisualState>
                                            </vsm:VisualStateGroup>
                                        </vsm:VisualStateManager.VisualStateGroups>
                                        <Grid x:Name="ThumbVisual">
                                            <Rectangle x:Name="Background" Stroke="{StaticResource TextBoxOverStroke}" Fill="{StaticResource VerticalScrollbarThumbBackground}" RadiusX="9" RadiusY="9" Margin="0,0,0,0" />
                                            <Rectangle x:Name="Over" RadiusX="9" RadiusY="9" Opacity="0" StrokeThickness="1" Fill="{x:Null}" Stroke="{StaticResource TextBoxFocusStroke}" />
                                        </Grid>
                                    </Grid>
                                </ControlTemplate>
                                <ControlTemplate x:Key="HorizontalThumbTemplate" TargetType="Thumb">
                                    <Grid>
                                        <vsm:VisualStateManager.VisualStateGroups>
                                            <vsm:VisualStateGroup x:Name="CommonStates">
                                                <vsm:VisualStateGroup.Transitions>
                                                    <vsm:VisualTransition To="MouseOver" GeneratedDuration="0:0:0.1" />
                                                    <vsm:VisualTransition To="Pressed" GeneratedDuration="0:0:0.1" />
                                                </vsm:VisualStateGroup.Transitions>
                                                <vsm:VisualState x:Name="Normal" />
                                                <vsm:VisualState x:Name="MouseOver">
                                                    <Storyboard>
                                                        <DoubleAnimation Duration="0" Storyboard.TargetName="Over" Storyboard.TargetProperty="Opacity" To="1"/>
                                                    </Storyboard>
                                                </vsm:VisualState>
                                                <vsm:VisualState x:Name="Pressed">
                                                    <Storyboard>
                                                    </Storyboard>
                                                </vsm:VisualState>
                                                <vsm:VisualState x:Name="Disabled">
                                                    <Storyboard>
                                                        <DoubleAnimation Duration="0" Storyboard.TargetName="ThumbVisual" Storyboard.TargetProperty="Opacity" To="0" />
                                                    </Storyboard>
                                                </vsm:VisualState>
                                            </vsm:VisualStateGroup>
                                        </vsm:VisualStateManager.VisualStateGroups>
                                        <Grid x:Name="ThumbVisual" Grid.RowSpan="2">
                                            <Rectangle x:Name="Background" Stroke="{StaticResource TextBoxOverStroke}" Fill="{StaticResource HorizontalScrollbarThumbBackground}" RadiusX="9" RadiusY="9" Margin="0,0,0,0" />
                                            <Rectangle x:Name="Over" RadiusX="9" RadiusY="9" Opacity="0" StrokeThickness="1" Fill="{x:Null}" Stroke="{StaticResource TextBoxFocusStroke}" />
                                        </Grid>
                                    </Grid>
                                </ControlTemplate>
                            </Grid.Resources>

                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="CommonStates">
                                    <vsm:VisualState x:Name="Normal" />
                                    <vsm:VisualState x:Name="MouseOver" >
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" Storyboard.TargetName="HorizontalSmallDecrease" Storyboard.TargetProperty="Opacity" To="1"/>
                                            <DoubleAnimation Duration="0" Storyboard.TargetName="HorizontalSmallIncrease" Storyboard.TargetProperty="Opacity" To="1"/>
                                            <DoubleAnimation Duration="0" Storyboard.TargetName="VerticalSmallDecrease" Storyboard.TargetProperty="Opacity" To="1"/>
                                            <DoubleAnimation Duration="0" Storyboard.TargetName="VerticalSmallIncrease" Storyboard.TargetProperty="Opacity" To="1"/>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0.5" />
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>

                            <Grid x:Name="HorizontalRoot">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>

                                <!-- Track Background Layer -->
                                <Rectangle Grid.ColumnSpan="5" RadiusX="0" RadiusY="0" Stroke="{StaticResource ScrollBarStroke}" StrokeThickness="1" Fill="{StaticResource HorizontalScrollbarTrackBackground}" />
                                <!-- Track Foreground Layer -->
                                <Rectangle Grid.Column="1" Grid.ColumnSpan="3" RadiusX="9" RadiusY="9" Stroke="{StaticResource ScrollBarStroke}" Fill="{StaticResource HorizontalScrollbarTrackForeground}" StrokeThickness="1" />

                                <!-- Repeat Buttons + Thumb -->
                                <RepeatButton x:Name="HorizontalSmallDecrease" Grid.Column="0" Width="18" Opacity="0" Interval="50" IsTabStop="False" Template="{StaticResource HorizontalDecrementTemplate}" />
                                <RepeatButton x:Name="HorizontalLargeDecrease" Grid.Column="1" Width="0" Interval="50" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" />
                                <Thumb x:Name="HorizontalThumb" Grid.Column="2" MinWidth="18" Width="18" Template="{StaticResource HorizontalThumbTemplate}" />
                                <RepeatButton x:Name="HorizontalLargeIncrease" Grid.Column="3" Interval="50" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" />
                                <RepeatButton x:Name="HorizontalSmallIncrease" Grid.Column="4" Width="18" Opacity="0" Interval="50" IsTabStop="False" Template="{StaticResource HorizontalIncrementTemplate}" />

                                <!-- Up Arrow Icon -->
                                <Path Data="F1 M 110.692,342.252L 110.692,352.682L 104.594,347.467L 110.692,342.252 Z " Grid.Column="0" Height="6" Width="5" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" IsHitTestVisible="False" Fill="{StaticResource SymbolEtch}" Margin="2,0,0,-2" StrokeThickness="2" Stroke="{StaticResource SymbolEtch}" />
                                <Path Data="F1 M 110.692,342.252L 110.692,352.682L 104.594,347.467L 110.692,342.252 Z " Grid.Column="0" Height="6" Width="5" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" IsHitTestVisible="False" Fill="{StaticResource Symbol}" />
                                <!-- Down Arrow Icon -->
                                <Path Data="F1 M 511.047,352.682L 511.047,342.252L 517.145,347.467L 511.047,352.682 Z " Grid.Column="4" Height="6" Width="5" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" IsHitTestVisible="False" Fill="{StaticResource SymbolEtch}" Margin="0,0,2,-2" StrokeThickness="2" Stroke="{StaticResource SymbolEtch}" />
                                <Path Data="F1 M 511.047,352.682L 511.047,342.252L 517.145,347.467L 511.047,352.682 Z " Grid.Column="4" Height="6" Width="5" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" IsHitTestVisible="False" Fill="{StaticResource Symbol}" />
                            </Grid>

                            <!-- Vertical Template -->
                            <Grid x:Name="VerticalRoot" Visibility="Collapsed" Background="{x:Null}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>

                                <!-- Track Background Layer -->
                                <Rectangle Grid.RowSpan="5" RadiusX="0" RadiusY="0" Stroke="{StaticResource ScrollBarStroke}" StrokeThickness="1" Fill="{StaticResource VerticalScrollbarTrackBackground}" />
                                <!-- Track Foreground Layer -->
                                <Rectangle Grid.Row="1" Grid.RowSpan="3" RadiusX="9" RadiusY="9" Stroke="{StaticResource ScrollBarStroke}" Fill="{StaticResource VerticalScrollbarTrackForeground}" StrokeThickness="1" />

                                <!-- Repeat Buttons + Thumb -->
                                <RepeatButton x:Name="VerticalSmallDecrease" Grid.Row="0" Height="18" Opacity="0" Interval="50" IsTabStop="False" Template="{StaticResource VerticalDecrementTemplate}" />
                                <RepeatButton x:Name="VerticalLargeDecrease" Grid.Row="1" Height="0" Interval="50" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" />
                                <Thumb x:Name="VerticalThumb" Grid.Row="2" MinHeight="18" Height="18" Template="{StaticResource VerticalThumbTemplate}" />
                                <RepeatButton x:Name="VerticalLargeIncrease" Grid.Row="3" Interval="50" IsTabStop="False" Template="{StaticResource RepeatButtonTemplate}" />
                                <RepeatButton x:Name="VerticalSmallIncrease" Grid.Row="4" Height="18" Opacity="0" Interval="50" IsTabStop="False" Template="{StaticResource VerticalIncrementTemplate}" />

                                <!-- Up Arrow Icon -->
                                <Path Height="5" Width="6" Data="F1 M 541.537,173.589L 531.107,173.589L 536.322,167.49L 541.537,173.589 Z " HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" IsHitTestVisible="False" Fill="{StaticResource SymbolEtch}" Margin="0,0,0,-2" StrokeThickness="1" Stroke="{StaticResource SymbolEtch}" />
                                <Path Height="5" Width="6" Data="F1 M 541.537,173.589L 531.107,173.589L 536.322,167.49L 541.537,173.589 Z " HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" IsHitTestVisible="False" Fill="{StaticResource Symbol}" />
                                <!-- Down Arrow Icon -->
                                <Path Grid.Row="4" Height="6" Width="6" Data="F1 M 531.107,321.943L 541.537,321.943L 536.322,328.042L 531.107,321.943 Z " HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" IsHitTestVisible="False" Fill="{StaticResource SymbolEtch}" Margin="0,0,0,-2" StrokeThickness="1" Stroke="{StaticResource SymbolEtch}"/>
                                <Path Grid.Row="4" Height="5" Width="6" Data="F1 M 531.107,321.943L 541.537,321.943L 536.322,328.042L 531.107,321.943 Z " HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" IsHitTestVisible="False" Fill="{StaticResource Symbol}"/>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="ScrollViewer">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalScrollBarVisibility" Value="Visible" />
            <Setter Property="Padding" Value="0"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="{StaticResource ScrollViewerStroke}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ScrollViewer">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                            <Grid Background="{TemplateBinding Background}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>

                                <ScrollContentPresenter x:Name="ScrollContentPresenter"
	                                           Cursor="{TemplateBinding Cursor}"
	                                           Margin="{TemplateBinding Padding}"
	                                           ContentTemplate="{TemplateBinding ContentTemplate}"/>

                                <ScrollBar x:Name="VerticalScrollBar" Width="16"
		                                       IsTabStop="False"
		                                       Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
		                                       Grid.Column="1" Grid.Row="0" Orientation="Vertical"
		                                       ViewportSize="{TemplateBinding ViewportHeight}"
		                                       Maximum="{TemplateBinding ScrollableHeight}"
		                                       Minimum="0"
		                                       Value="{TemplateBinding VerticalOffset}"
		                                       IsEnabled="True"/>

                                <ScrollBar x:Name="HorizontalScrollBar" Height="16"
		                                       IsTabStop="False"
		                                       Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
		                                       Grid.Column="0" Grid.Row="1" Orientation="Horizontal"
		                                       ViewportSize="{TemplateBinding ViewportWidth}"
		                                       Maximum="{TemplateBinding ScrollableWidth}"
		                                       Minimum="0"
		                                       Value="{TemplateBinding HorizontalOffset}"/>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="DataGridColumnHeaderStyle1" TargetType="sdk:DataGridColumnHeader">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="SeparatorBrush" Value="#FFC9CACA"/>
            <Setter Property="Padding" Value="4"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="sdk:DataGridColumnHeader">
                        <Grid x:Name="Root">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverBackground"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <!--<Storyboard>
        									<ColorAnimation Duration="0" To="#FF448DCA" Storyboard.TargetProperty="(Fill).Color" Storyboard.TargetName="BackgroundRectangle"/>
        									<ColorAnimation Duration="0" To="#D8FFFFFF" Storyboard.TargetProperty="(Fill).(GradientStops)[0].Color" Storyboard.TargetName="BackgroundGradient"/>
        									<ColorAnimation Duration="0" To="#C6FFFFFF" Storyboard.TargetProperty="(Fill).(GradientStops)[1].Color" Storyboard.TargetName="BackgroundGradient"/>
        									<ColorAnimation Duration="0" To="#8CFFFFFF" Storyboard.TargetProperty="(Fill).(GradientStops)[2].Color" Storyboard.TargetName="BackgroundGradient"/>
        									<ColorAnimation Duration="0" To="#3FFFFFFF" Storyboard.TargetProperty="(Fill).(GradientStops)[3].Color" Storyboard.TargetName="BackgroundGradient"/>
        								</Storyboard>-->
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SortStates">
                                    <VisualState x:Name="Unsorted"/>
                                    <VisualState x:Name="SortAscending">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SortIcon"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SortDescending">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SortIcon"/>
                                            <DoubleAnimation Duration="0" To="-.9" Storyboard.TargetProperty="(RenderTransform).ScaleY" Storyboard.TargetName="SortIcon"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <!--<Rectangle x:Name="BackgroundRectangle" Grid.ColumnSpan="2" Fill="SlateGray" Stretch="Fill"/>-->
                            <Border>
                                <Border.Background>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#ff888888"/>
                                        <GradientStop Color="#FF333333" Offset="1"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                            </Border>
                            <Rectangle x:Name="MouseOverBackground" Grid.ColumnSpan="2" Stretch="Fill" Opacity="0">
                                <Rectangle.Fill>
                                    <RadialGradientBrush>
                                        <RadialGradientBrush.RelativeTransform>
                                            <TransformGroup>
                                                <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleY="1.965" ScaleX="1.883"/>
                                                <SkewTransform CenterX="0.5" CenterY="0.5"/>
                                                <RotateTransform CenterX="0.5" CenterY="0.5" Angle="-44.004"/>
                                                <TranslateTransform Y="0.33" X="-0.005"/>
                                            </TransformGroup>
                                        </RadialGradientBrush.RelativeTransform>
                                        <GradientStop Color="#FF4390bb"/>
                                        <GradientStop Color="#00000000" Offset="1"/>
                                    </RadialGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <ContentPresenter Content="{TemplateBinding Content}"/>
                                <Path x:Name="SortIcon" Grid.Column="1" Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z " Fill="White" HorizontalAlignment="Left" Margin="4,0,0,0" Opacity="0" RenderTransformOrigin=".5,.5" Stretch="Uniform" VerticalAlignment="Center" Width="8">
                                    <Path.RenderTransform>
                                        <ScaleTransform ScaleY=".9" ScaleX=".9"/>
                                    </Path.RenderTransform>
                                </Path>
                            </Grid>
                            <Rectangle x:Name="VerticalSeparator" Grid.Column="1" Fill="{TemplateBinding SeparatorBrush}" Visibility="{TemplateBinding SeparatorVisibility}" VerticalAlignment="Stretch" Width="1"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="DataGridRowStyle1" TargetType="sdk:DataGridRow">
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="sdk:DataGridRow">
                        <sdk:DataGridFrozenGrid x:Name="Root">
                            <sdk:DataGridFrozenGrid.Resources>
                                <Storyboard x:Key="DetailsVisibleTransition">
                                    <DoubleAnimation Duration="00:00:0.1" Storyboard.TargetProperty="ContentHeight" Storyboard.TargetName="DetailsPresenter"/>
                                </Storyboard>
                            </sdk:DataGridFrozenGrid.Resources>
                            <sdk:DataGridFrozenGrid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition/>
                            </sdk:DataGridFrozenGrid.ColumnDefinitions>
                            <sdk:DataGridFrozenGrid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </sdk:DataGridFrozenGrid.RowDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="NormalAlternatingRow">
                                        <!--<Storyboard>
                                            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundRectangle"/>
                                        </Storyboard>-->
                                    </VisualState>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundRectangle"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="NormalSelected">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundRectangle"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOverSelected">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundRectangle"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="UnfocusedSelected">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundRectangle"/>
                                            <ColorAnimation Duration="0" To="#FFE1E7EC" Storyboard.TargetProperty="(Fill).Color" Storyboard.TargetName="BackgroundRectangle"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ValidationStates">
                                    <VisualState x:Name="Valid"/>
                                    <VisualState x:Name="Invalid">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="BackgroundRectangle">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="InvalidVisualElement"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle x:Name="BackgroundRectangle" Grid.ColumnSpan="2" Fill="#FF749FD2" Opacity="0" Grid.RowSpan="2"/>
                            <Rectangle x:Name="InvalidVisualElement" Grid.ColumnSpan="2" Fill="#FFF7D8DB" Opacity="0" Grid.RowSpan="2"/>
                            <sdk:DataGridRowHeader x:Name="RowHeader" sdk:DataGridFrozenGrid.IsFrozen="True" Grid.RowSpan="3"/>
                            <sdk:DataGridCellsPresenter x:Name="CellsPresenter" Grid.Column="1" sdk:DataGridFrozenGrid.IsFrozen="True"/>
                            <sdk:DataGridDetailsPresenter x:Name="DetailsPresenter" Grid.Column="1" Grid.Row="1"/>
                            <Rectangle x:Name="BottomGridLine" Grid.Column="1" HorizontalAlignment="Stretch" Height="1" Grid.Row="2"/>
                        </sdk:DataGridFrozenGrid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    
    <Grid x:Name="LayoutRoot">
        <Popup x:Name="blah" IsOpen="{Binding IsOpen}">
            <Grid>
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseEnter">
                        <cmd:EventToCommand Command="{Binding MouseEnterCommand}" PassEventArgsToCommand="True"/>
                    </i:EventTrigger>
                    <i:EventTrigger EventName="MouseLeave">
                        <cmd:EventToCommand Command="{Binding MouseLeaveCommand}" PassEventArgsToCommand="True"/>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
                <sdk:DataGrid
                    MaxHeight="200" MaxWidth="250"
					VerticalScrollBarVisibility="Auto" 
					HorizontalScrollBarVisibility="Auto" 
					CanUserReorderColumns="False" 
					CanUserResizeColumns="False" 
					CanUserSortColumns="True"
					SelectionMode="Single"
                    AutoGenerateColumns="False"
                    DataContext="{Binding}"
                    ItemsSource="{Binding Attributes}"
                    ColumnHeaderStyle="{StaticResource DataGridColumnHeaderStyle1}"
                    RowStyle="{StaticResource DataGridRowStyle1}">
                    <sdk:DataGrid.Columns>
                        <sdk:DataGridTextColumn Header="Name" Binding="{Binding Key}"/>
                        <sdk:DataGridTemplateColumn Header="Value">
                            <sdk:DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <local:TextOrLinkSelector Content="{Binding}">
                                        <local:TextOrLinkSelector.LinkTemplate>
                                            <DataTemplate>
                                                <HyperlinkButton Content="{Binding Value}" NavigateUri="{Binding Value}" TargetName="_blank" />
                                            </DataTemplate>
                                        </local:TextOrLinkSelector.LinkTemplate>
                                        <local:TextOrLinkSelector.TextTemplate>
                                            <DataTemplate>
                                                <TextBlock Text="{Binding Value}" />
                                            </DataTemplate>
                                        </local:TextOrLinkSelector.TextTemplate>
                                    </local:TextOrLinkSelector>
                                </DataTemplate>
                            </sdk:DataGridTemplateColumn.CellTemplate>
                        </sdk:DataGridTemplateColumn>
                    </sdk:DataGrid.Columns>
                    <sdk:DataGrid.Effect>
                        <DropShadowEffect ShadowDepth="7" Opacity=".75" />
                    </sdk:DataGrid.Effect>
                </sdk:DataGrid>
            </Grid>
        </Popup>
    </Grid>
</UserControl>
